<extend file='../master'/>
<block name="content">
    <ul class="nav nav-tabs">
        <li><a href="{{site_url('site/lists','button')}}">菜单列表</a></li>
        <li class="active"><a href="{{site_url('site/post')}}" role="tab">添加菜单</a></li>
    </ul>
    <link rel="stylesheet" href="{{__TEMPLATE__}}/css/4.css">
    <div class="middle" id="hd" ng-controller="ctrl">
        <div class="col-lg-6">
            <div class="phone_top">
                <div class="app">
                    <div class="menu">
                        <ul>
                            <li ng-repeat="v in menus.button">
                                @{{v.name}}
                                <div class="child-menu" ng-if="v.sub_button.length">
                                    <a href="" ng-repeat="m in v.sub_button" ng-bind="m.name"></a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-lg-6">
            <form action="" method="post" id="form" class="form-horizontal">
                <h4>编辑菜单</h4>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">名称:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="name" value="{{$field['name']}}">
                        <if value="!empty($field['id'])">
                            <input type="hidden" class="form-control" name="id" value="{{$field['id']}}">
                        </if>
                    </div>
                </div>
                <div class="edit panel panel-default" ng-repeat="(k,v) in menus.button">
                    <!--顶部-->
                    <div class="panel-body">
                        <i class="fa fa-close delIcon" ng-click="delTopMenu(v)"></i>
                        <div class="panel panel-default" style="padding-top: 10px">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">标题</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" ng-model="v.name">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">类型</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" ng-model="v.type" value="view"> 链接
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" ng-model="v.type" value="click"> 关键词
                                </label>
                            </div>
                        </div>
                        <div class="form-group" ng-if="v.type=='view'">
                            <label class="col-sm-2 control-label">链接</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" ng-model="v.url">
                            </div>
                        </div>
                        <div class="form-group" ng-if="v.type=='click'">
                            <label class="col-sm-2 control-label">关键词</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" ng-model="v.key">
                            </div>
                        </div>
                        <!--子菜单-->
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                子菜单
                            </div>
                            <div class="panel-body childMenu" ng-repeat="m in v.sub_button">
                                <i class="fa fa-close delIcon" ng-click="delChildMenu(k,m)"></i>
                                <div class="panel panel-default">
                                    <div class="panel-body">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">标题</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" ng-model="m.name">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">类型</label>
                                            <div class="col-sm-10">
                                                <label class="radio-inline">
                                                    <input type="radio" ng-model="m.type" value="view"> 链接
                                                </label>
                                                <label class="radio-inline">
                                                    <input type="radio" ng-model="m.type" value="click"> 关键词
                                                </label>
                                            </div>
                                        </div>
                                        <div class="form-group" ng-if="m.type=='view'">
                                            <label class="col-sm-2 control-label">链接</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" ng-model="m.url">
                                            </div>
                                        </div>
                                        <div class="form-group" ng-if="m.type=='click'">
                                            <label class="col-sm-2 control-label">关键词</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" ng-model="m.key">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-default btn-xs" ng-click="addChildMenu(k)">添加子菜单</button>

                    </div>
                </div>
                <button type="button" class="btn btn-success" ng-click="addTopMenu()">添加一级菜单</button>
                <textarea name="data" hidden="hidden"></textarea>
                <button class="btn btn-primary" value="submit">保存</button>
            </form>
        </div>
    </div>
</block>
<script>
    require(['angular', 'underscore', 'bootstrap'],function (angular,_,$) {
        var m = angular.module('hd', []);
        m.controller('ctrl', ['$scope', function ($scope) {
            var action = "<?php echo isset($field)?'edit':'add';?>";
            if (action == 'add') {
                $scope.menus = {
                    button: [
                        {
                            name: '',
                            type: 'click',
                            key: '',
                            url: '',
                            sub_button: []
                        }
                    ]
                };
            } else {
                $scope.menus = <?php echo $field['data']?:'[]';?>;
            }
//            添加一级菜单
            $scope.addTopMenu = function () {
                if($scope.menus.button.length == 3){
                    alert('最多为3个子菜单');
                    return false;
                }
                var menu = {
                    name: '',
                    type: 'view',
                    key: '',
                    url: '',
                    sub_button: []
                }
                $scope.menus.button.push(menu);
            }
//            删除1级菜单
            $scope.delTopMenu = function (item) {
                $scope.menus.button = _.without($scope.menus.button, item);
            }
//            添加子菜单
            $scope.addChildMenu = function (k) {
                if ($scope.menus.button[k].sub_button.length >= 5) {
                    alert('子菜单最多为五个');
                    return false;
                }
                var menu = {
                    name: '',
                    type: 'view',
                    key: '',
                    url: ''
                }
                $scope.menus.button[k].sub_button.push(menu);
            }
            //删除子菜单
            $scope.delChildMenu = function (k, item) {
                $scope.menus.button[k].sub_button = _.without($scope.menus.button[k].childMenu, item);
            }

//            json打包
            $("form").submit(function () {
                $("[name='data']").val(angular.toJson($scope.menus));
            })




        }]);
        angular.bootstrap(document.getElementById('hd'), ['hd']);

    })
</script>


